<template>
	<view class="mi-circle-evaluate">
		<template v-if="content_list.length===0">
			<noData></noData>
		</template>
		<template v-else>
			<view class="touchBox list-container">
				<view class="card rec-card" v-for="(item,index) in content_list" :key="index">
					<view class="user">
						<view class="user-avatar">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="user-info">
							<view class="user-info-name">
								{{item.nickname}}
							</view>
						</view>
						<view class="user-ctrl"></view>
					</view>
					<view class="card-content" @click="toEvaluateDetail(item)">
						<template v-if="item.title">
							<view class="article">
								<view class="title">
									{{item.title}}
								</view>
								<view class="content">
									{{item.content | contentFilter}}
									<text style="color: #FF5528;margin-left: .2rem;">查看全文</text>
								</view>
								<imageList :pic_list='item.pic_list' :video_list='item.video_list'>
								</imageList>
							</view>
						</template>
						<template v-else>
							<view class="normal">
								<view class="content">
									{{item.content}}
								</view>
								<imageList :pic_list='item.pic_list' :video_list='item.video_list'>
								</imageList>
							</view>
						</template>
					</view>
					<view class="moment-tags" v-if="item.tag_list.length!==0">
						<view class="tags-item" v-for="(i,j) in item.tag_list" :key="j">
							<image src="../../../static/images/huati.png" mode=""></image>
							<text>{{i.tag}}</text>
						</view>
					</view>
					<view class="card-message">
						<view class="card-message-item">
							<view class="p">
								<text class="name">{{item.hot_comment.name}}：</text>
								{{item.hot_comment.comment}}
							</view>
							<view class="p">
								<text class="name">{{item.hot_comment.belong_place}}</text>
							</view>
						</view>
					</view>
					<view class="card-ctrl">
						<view class="shar-btn">
							<image src="../../../static/images/m_b_share.png" mode=""></image>
						</view>
						<view class="send-btn" @click="getComment(item,item.comment_num)">
							<image src="../../../static/images/m_b_msg.png" mode=""></image>
							<text class="num">{{item.comment_num}}</text>
						</view>
						<view class="praise-btn">
							<image src="../../../static/images/m_b_praisa.png" mode=""></image>
							<text class="num">{{item.praise_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-popup :show="show" @close="show=false" closeable closeOnClickOverlay>
				<view class="comment-pop-box">
					<view class="comment-pop-title">
						共{{total}}条评论
						<view class="close-btn" @click="show=false">

						</view>
					</view>
					<view class="comment-pop-scroll">
						<template v-if="isLoading">
							<view class="el-flex" style="height: 60vh;">
								<u-loading-icon size='50'></u-loading-icon>
							</view>
						</template>
						<template v-else>
							<view class="comment-pop-list">
								<template v-if="comment_list.length==0">
									<view class="comment-pop-empty">
										暂时还没有评论哦
									</view>
								</template>
								<template v-else>
									<scroll-view style="height: 60vh;" scroll-y="true" @scrolltolower="scrolltolower">
										<view class="comment" v-for="(item,index) in comment_list" :key="index">
											<view class="comment-avatar">
												<image :src="item.img" mode=""></image>
											</view>
											<view class="comment-content">
												<view class="comment-info">
													<view class="comment-info-l">
														<view class="comment-user">
															<text class="name">
																{{item.nickname}}
															</text>
															<text class="time">
																{{item.create_time|formatRelativeTime}}
															</text>
															<text class="time">
																{{item.belong_place}}
															</text>
														</view>
														<view class="comment-text">
															{{item.comment}}
														</view>

													</view>
													<view class="comment-praise">
														<text class="num">{{item.praise_num}}</text>
														<image src="../../../static/images/m_b_praisa.png" mode="">
														</image>
													</view>
												</view>
												<view class="comment-discuss"
													v-if="item.second_comment_list.length!==0">
													<view class="comment-discuss-item"
														v-for="(i,j) in item.second_comment_list" :key="j">
														<view class="p">
															<text class="name">
																{{i.nickname}}
															</text>
															<text class="name">
																:
															</text>
															<text class="text">{{i.comment}}</text>
														</view>
														<view class="p">
															<text class="name">
																{{i.belong_place}}
															</text>
														</view>
													</view>
												</view>
											</view>
										</view>
									</scroll-view>
								</template>
							</view>
						</template>
					</view>
					<view class="comment-pop-footer">
						<view class="comment-pop-input">
							<image src="../../../static/images/write.png" mode=""></image>
							来说点什么...
						</view>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	import imageList from '../moment_images/moment_images.vue'
	import noData from '../../noData/noData.vue'
	import formatRelativeTime from '../../../common/js/formatRelativeTime.js'
	export default {
		props: ['topic_id', 'product_id'],
		components: {
			imageList,
			noData
		},
		data() {
			return {
				isLoading: false,
				show: false,
				session_id: Math.round((1e10 * Math.random())),
				page: 1,
				content_list: [],
				comment_list: [],
				type: '',
				page_index: 1,
				commemtId: '',
				loadAll: false,
				total: '',
				last_id: ''
			};
		},
		filters: {
			contentFilter: function(params) {
				if (params.length > 0) {
					params = params.replace(/&#58;/g, ":")
					if (params.length > 70) {
						return params.slice(0, 70) + '...'
					} else {
						return params;
					}
				}
			},
			formatRelativeTime: formatRelativeTime
		},
		methods: {
			scrolltolower() {
				if (this.type == 99) {
					if (this.loadAll) return;
					this.page_index++
					this.getMizoneOtherCommentList(this.commemtId, this.page_index)
				}
			},
			getComment(item, comment_num) {
				this.show = true
				this.isLoading = true
				this.page_index = 1
				this.last_id = ''
				this.loadAll = false
				this.comment_list = []
				this.total = comment_num
				if (item.content_type == 99) {
					this.type = 99
					this.commemtId = item.id
					this.getMizoneOtherCommentList(item.id, 1)
				} else if (item.content_type == 2) {
					this.type = 2
					this.commemtId = item.id
					this.getCommentDisplayList(item.id)
				}
			},
			getMizoneOtherCommentList(id, page_index) {
				this.$request.get('/getMizoneOtherCommentList', {
					'moment_id': id,
					comment_type:'moment',
					'page_index': page_index,
					last_id: this.last_id
				}).then((res) => {
					let list = res.data.data.comment_list
					this.last_id = res.data.data.last_id
					if (list.length == 0 || res.data.data.is_end) {
						this.loadAll = true
					}
					if (this.comment_list.length == 0) {
						this.comment_list = list
					} else {
						this.comment_list = this.comment_list.concat(list)
					}
					this.isLoading = false
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getCommentDisplayList(id) {
				this.$request.get('/getCommentDisplayList', {
					content_id: id,
				}).then((res) => {
					this.comment_list = res.data.data.comment_list
					this.isLoading = false
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			toEvaluateDetail(item) {
				if (item.content_type == 99) {
					uni.navigateTo({
						url: `/secPage/evaluateDetail/evaluateDetail?id=${item.id}`,
					})
				} else if (item.content_type == 2) {
					uni.navigateTo({
						url: `/secPage/discoverArticle/discoverArticle?id=${item.id}`,
					})
				}
			},
			getMizoneContentList() {
				this.$request.get('/getMizoneContentList', {
					product_id: this.product_id,
					tag_id: this.topic_id,
					session_id: this.session_id,
					page: this.page,
				}).then((res) => {
					this.content_list = res.data.data.content_list
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		mounted() {
			this.getMizoneContentList()
		}
	}
</script>

<style scoped lang="scss">
	view {
		line-height: 1.15;
	}

	.comment-pop-empty {
		height: 60vh;
		line-height: 60vh;
		text-align: center;
		color: #999;
	}

	.mi-circle-evaluate {
		.list-container {

			.rec-card {
				padding-top: 0.3rem;
				text-align: left;

				.user {
					margin-bottom: 0.2rem;
					display: flex;
					align-items: center;

					.user-avatar {
						margin-right: 0.16rem;
						width: 0.52rem;
						height: 0.52rem;
						border-radius: 0.52rem;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user-info {
						flex: 1;

						.user-info-name {
							font-size: .24rem;
							font-weight: 500;
							color: #161616;
							line-height: 1.4;
						}
					}

					.user-ctrl {
						margin-left: 0.1rem;
						width: 0.4rem;
						height: 0.4rem;
						background: url(../../../static/images/h_three.png) 50% no-repeat;
						background-size: 100% 100%;
					}
				}

				.moment-tags {
					max-height: 1.2rem;
					overflow: hidden;

					.tags-item {
						float: left;
						display: flex;
						align-items: center;
						padding: 0.09rem;
						margin-right: 0.14rem;
						max-width: 6.6rem;
						margin-bottom: 0.18rem;
						line-height: .24rem;
						background: #f6f6f6;
						border-radius: 0.06rem;
						font-size: .24rem;
						font-weight: 500;
						color: #757575;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						image {
							float: left;
							margin-right: 0.07rem;
							width: 0.24rem;
							height: 0.24rem;
						}

						text {
							font-size: .24rem;
							font-weight: 500;
							color: #757575;
						}
					}
				}

				.card-content {
					margin-bottom: 0.27rem;

					.article {
						.title {
							font-size: .3rem;
							font-weight: 500;
							color: #333;
							line-height: .4rem;
						}

						.content {
							margin-top: 0.16rem;
							font-size: .26rem;
							color: #666;
							line-height: .43rem;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
						}
					}

					.normal {
						.content {
							font-size: .3rem;
							font-weight: 500;
							color: #161616;
							line-height: 1.6;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
					}
				}

				.card-message {
					padding: 0.16rem;
					margin-bottom: 0.14rem;
					background: #f6f6f6;
					border-radius: 0.1rem;

					.card-message-item {

						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;

						.p {
							.name {
								font-size: .26rem;
								font-weight: 400;
								color: #757575;
								line-height: 1.34;
							}

						}
					}
				}

				.card-ctrl {
					padding: 0 .1rem;
					padding-bottom: 0.2rem;

					display: flex;
					justify-content: space-around;

					view {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 0.4rem;
							height: 0.4rem;
							margin-right: .05rem;
						}

						.num {
							font-size: .24rem;
							font-family: DIN-Medium, DIN;
							font-weight: 500;
							color: #757575;
						}
					}
				}

			}
		}
	}

	.comment-pop-title {
		padding: 0.3rem 0;
		font-size: .28rem;
		color: #333;
		font-weight: 600;
		text-align: center;

		.close-btn {
			width: 0.32rem;
			height: 0.32rem;
			position: absolute;
			top: 0.3rem;
			right: 0.24rem;
			background: url(../../../static/images/close_b.png) 50% no-repeat;
			background-size: 100% 100%;
		}
	}

	.comment-pop-box {
		padding: 0 0.24rem;
		background-color: #fff;
		border-radius: 0.24rem 0.24rem 0 0;
		overflow: hidden;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.comment-pop-footer {
		margin: 0 -0.24rem;
		padding: 0.24rem;
		border-top: 1px solid #f6f6f6;

		.comment-pop-input {
			display: flex;
			align-items: center;
			padding: 0 0.24rem;
			height: 0.66rem;
			line-height: .66rem;
			border-radius: 0.33rem;
			overflow: hidden;
			color: #999;
			background-color: #f6f6f6;

			image {
				margin-right: 0.1rem;
				width: 0.3rem;
				height: 0.3rem;
			}
		}
	}

	.comment-pop-scroll {
		max-height: 60vh;
		overflow: auto;
		min-height: 60vh;

		.comment-pop-list {
			overflow: hidden;

			.comment {
				display: flex;
				align-items: flex-start;
				text-align: left;
				padding-bottom: 0.2rem;

				.comment-avatar {
					margin-right: 0.24rem;
					width: 0.52rem;
					height: 0.52rem;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.comment-content {
					flex: 1;
					padding-bottom: 0.14rem;
					border-bottom: 1px solid #f5f5f5;

					.comment-discuss {
						margin-top: 0.05rem;
						margin-bottom: 0.06rem;
						padding: 0.2rem;
						background: #fafafa;
						border-radius: 0.08rem;
						line-height: 1.4;

						.comment-discuss-item {
							.p {
								.name {
									font-size: .26rem;
									color: #999;
								}

								.text {
									font-size: .26rem;
									color: #333;
								}
							}
						}
					}

					.comment-info {
						display: flex;
						align-items: flex-start;

						.comment-info-l {
							flex: 1;

							.comment-user {


								.name {
									font-size: .24rem;
									color: #999;
								}

								.time {
									font-size: .24rem;
									color: #999;

									&:not(:first-child) {
										margin-left: 0.1rem;
									}
								}
							}

							.comment-text {
								margin-top: 0.06rem;
								font-size: .26rem;
								color: #333;
								line-height: 1.6;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}

						.comment-praise {
							display: flex;
							align-items: flex-end;
							color: #999;
							font-size: .2rem;
							font-weight: 500;
							position: relative;

							.num {
								margin-right: 0.04rem;
								position: relative;
								top: -10%;
							}

							image {
								display: inline-block;
								width: 0.29rem;
								height: 0.29rem;
							}
						}
					}
				}
			}
		}

	}
</style>